<script setup>
// 导入ref函数
import  {ref, computed} from 'vue'

//使用ref函数 传入简单类型或复杂类型  返回一个响应式的对象
// 再script标签中使用的时候通过.value来使用
// 模板里直接使用变量名即可
const count = ref(0)
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性 二倍
const doubleCount = computed(() => {
  return count.value * 2
})

// 计算属性  筛选大于4的数组
const filterList = computed(() => {
  return  list.value.filter(item => item> 4)
})


const message = '我就展示的,不干别的'
console.log(count.value);
const add = () => {
  count.value++
}
</script>

<template>
  <div class="app-page">
    {{ count }} --- {{ doubleCount }} --- {{ message }}
    <button @click="add">加1</button>
    {{ list }} -- {{ filterList }}
  </div>
</template>

<style scoped></style>
